<template>
  <div class="app-container">
    <el-container class="app">
      <el-aside
        width="calc(30% - 20px)"
        style="background-color: white"
      >
        <el-container>
          <el-header>
            <el-row>
              <el-col :span="24">
                <el-input
                  suffix-icon="el-icon-search"
                  placeholder="Enter 回车搜索联系人"
                  v-model="searchUserName"
                />
              </el-col>
            </el-row>
            <!-- <el-row style="margin-top: 5px">
                <el-button size="mini">全部</el-button>
            </el-row> -->
          </el-header>
          <div>
            <el-main
              v-if="chats.length > 0"
              class="msgListMain"
            >
              <el-row
                class="msgUserList"
                v-for="(item, index) in chats"
                :key="item.chatId"
                :style="index > 0 && 'margin-top: 10px'"
                @click.native="loadMessage(item.chatId)"
              >
                <el-col :span="5">
                  <el-image
                    :src="item.user.avatar ? '/dev-api'+item.user.avatar  :'https://www.imouldyun.com/files/2024/12/06/F6TndPGBQA.jpg'"
                    fit="fill"
                    style="width: 70%;border-radius: 50%; margin-top: 6px"
                  />
                </el-col>
                <el-col :span="19">
                  <el-row>
                    <el-col :span="5"><span style="font-weight: 500; font-size: 16px">{{item.user.nickName || item.user.name}}</span></el-col>
                    <el-col :span="15">
                      <span style="font-size: 15px">{{!isUserType1?"教师":"学生"}}</span>
                      <el-divider direction="vertical" />
                      <span style="font-size: 15px">{{item.user.sex==1?"女":"男"}}</span>
                     
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col
                      :span="5"
                      style="font-size: 12px; text-overflow: ellipsis; white-space: nowrap"
                    >
                      <span><i
                          class="el-icon-circle-check"
                          :style="(item.messages.length && !item.messages[item.messages.length - 1].isRead) && 'color:red;'"
                        ></i>{{item.messages.length && item.messages[item.messages.length - 1].message }}</span>
                    </el-col>
                    <el-col
                      :span="5"
                      style="float: right"
                    >
                      <el-dropdown class="hover_down_menu">
                        <span class="el-dropdown-link">
                          <i class="el-icon-arrow-down el-icon-more"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item>置顶</el-dropdown-item>
                          <el-dropdown-item>删除</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>

            </el-main>
            <el-main
              v-else
              class="msgListMain_empty"
            >
              <el-row>
                <el-col :span="24">
                  <img
                    src="@/assets/images/pay.png"
                    style="width: 80%; height: 80%"
                  />
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <span style="color: gray">暂无联系人</span>
                </el-col>
              </el-row>
            </el-main>
          </div>
        </el-container>
      </el-aside>

      <el-main :class="chatId ? 'main' : 'main_empty'">
        <div
          v-if="chatId"
          class="chat"
        >
          <img
            class="image"
            :src="currentContact.user.avatar ? '/dev-api'+currentContact.user.avatar  :'https://www.imouldyun.com/files/2024/12/06/F6TndPGBQA.jpg'"
            alt=""
          >
          <el-row>
            <el-col
              :span="8"
              style="color: #666"
            >
              <span style="font-weight: 500; font-size: 16px">{{ currentContact.user.nickName || currentContact.user.name}}</span>
              <span style="font-size: 16px; margin-left: 30px">{{!isUserType1?"教师":"学生"}}</span>
              <el-divider direction="vertical" />
              <span style="font-size: 16px;">{{currentContact.user.sex==1?"女":"男"}}</span>
              <el-divider direction="vertical" v-if="!isUserType1" />
                      <el-popover
                        placement="right"
                        width="468"
                        trigger="click"
                        v-if="!isUserType1"
                      >
                        <Reviews v-model="tutorId"></Reviews>
                        <el-button slot="reference" size="mini">查看评分</el-button>
                      </el-popover>
            </el-col>
            <el-col
              :span="6"
              style="float: right"
            >
              <el-button
                size="small"
                type="primary"
                v-if="!isUserType1"
                @click="drawer = true"
              >发送订单</el-button>
              <!-- <el-button size="small" type="primary" icon="el-icon-time">面试</el-button>
              <el-button size="small">取消置顶</el-button> -->
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <!-- <span>{{currentContact.major}}</span>
              <span style="color: red; font-size: 17px; margin-left: 20px">{{currentContact.salary}}</span>
              <span style="margin-left: 20px">{{currentContact.city}}</span> -->
            </el-col>
          </el-row>
          <el-row>
            <el-col
              :span="24"
              class="msg_content"
              id="message_content"
            >
              <el-row
                v-for="(item, index) in currentContact.messages"
                :key="item.messageId"
                :style="index > 0 && 'margin-top: 30px'"
              >
                <div v-if="userId == item.receiverId">
                  <el-col
                    :span="2"
                    style="text-align: center"
                  >
                    <el-image
                      :src="currentContact.user.avatar ? '/dev-api'+currentContact.user.avatar  :'https://www.imouldyun.com/files/2024/12/06/F6TndPGBQA.jpg'"
                      fit="cover"
                      style="width: 40%;border-radius: 50%"
                    />
                  </el-col>
                  <el-col
                    :span="10"
                    style="font-size: 16px; line-height: 40px;"
                  >
                    <span v-if="item.type==1">{{item.message}}</span>
                    <order
                      :id="item.message"
                      v-if="item.type==2"
                    ></order>
                    <span style="font-size: 11px; color: gray; margin-left: 5px">{{item.timestamp}}</span>
                  </el-col>
                </div>
                <div v-else>
                  <el-col
                    :span="24"
                    style="font-size: 16px;"
                  >
                    <div class="chat_bubble">
                      <span v-if="item.type==1">{{item.message}}</span>
                      <order
                        :id="item.message"
                        v-if="item.type==2"
                      ></order>
                    </div>
                    <!-- <i class="el-icon-circle-check" style="float: right; margin-right: 5px; color: lightgray; vertical-align: bottom; margin-top: 23px"></i> -->
                    <span style="font-size: 11px; color: gray; margin-right: 5px; float: right; margin-top: 25px">{{item.timestamp}}</span>
                  </el-col>
                </div>
              </el-row>
              <el-row
                id="message_content_end"
                style="height: 15px"
              ><el-col></el-col></el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-row>
                <el-col :span="24">
                  <el-popover
                    placement="top-start"
                    trigger="click"
                  >
                    <div>
                      <VEmojiPicker
                        :showSearch="false"
                        @select="insertEmoji"
                      />
                    </div>
                    <!-- <img
                      slot="reference"
                      src=""
                      title="表情"
                      class="input_top_menu_img"
                    /> -->
                    <span
                      slot="reference"
                      class="input_top_menu_img"
                    >😀</span>
                  </el-popover>
                </el-col>
              </el-row>

              <el-input
                type="textarea"
                :rows="3"
                v-model="inputVal"
                style="font-size: 17px; color: black"
                @keyup.enter.native="send"
                placeholder="Enter 回车发送消息"
              />
            </el-col>
          </el-row>
        </div>
        <div v-else>
          <el-row>
            <el-col :span="24">
              <img src="" />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <span style="color: gray">与您进行过沟通的联系人都会在左侧列表中显示</span>
            </el-col>
          </el-row>
        </div>
      </el-main>

    </el-container>
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      size="70%"
      :with-header="false"
    >
      <tutorrequest @getItem="getItem"></tutorrequest>
    </el-drawer>
  </div>
</template>

  <script>
import tutorrequest from '@/views/system/tutorrequest'
import order from './components/order'
import { VEmojiPicker } from 'v-emoji-picker'
import dayjs from 'dayjs'
import Reviews from './components/Reviews'
export default {
  name: 'chat',
  components: {
    VEmojiPicker,
    Reviews,
    tutorrequest,
    order,
  },
  data() {
    return {
      drawer: false,
      chatId: null,
      tutorId:null,
      inputVal: '',
      userId: null,
      searchUserName: '',
      currentContact: {},
      isUserType1: false,
      type: [
        { value: 1, label: '消息' },
        { value: 2, label: '图片' },
        { value: 3, label: '订单' },
      ],
    }
  },
  computed: {
    // 当前聊天用户
    chats() {
      let chats = this.$store.getters.chats
      return chats.filter((item) => {
        return (
          item.user.nickName?.includes(this.searchUserName) ||
          item.user.name?.includes(this.searchUserName)
        )
      })
    },
  },
  watch: {
    chats: {
      handler() {
        this.setBottom()
      },
      deep: true,
      immediated: true,
    },
  },
  mounted() {},
  created() {
    this.userId = this.$store.state.user.id
    this.isUserType1 = this.$store.getters.user.userType == 1 ? true : false
    if (this.$route.query.chatId) {
      setTimeout(() => {
        this.loadMessage(this.$route.query.chatId)
      }, 100)
    }
  },
  methods: {
    getItem(row) {
      console.log(row)
      this.drawer = false
      let message = {
        name: 'message',
        type: 2,
        chatId: this.chatId,
        message: row.id,
        senderId: this.userId,
        receiverId:
          this.userId == this.currentContact.user1Id
            ? this.currentContact.user2Id
            : this.currentContact.user1Id,
        timestamp: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        isRead: false,
      }
      this.$websocket.sendWebsocket(message)
      this.$store.dispatch('sender', { chatId: this.chatId, message })
    },
    setBottom() {
      if (this.chatId) {
        this.$nextTick(() => {
          let message_content = document.getElementById('message_content')
          let message_content_end = document.getElementById(
            'message_content_end'
          )
          message_content.scrollTop =
            message_content.scrollHeight -
            message_content.clientHeight +
            message_content_end.clientHeight
        })
      }
    },
    send() {
      if (this.inputVal) {
        let message = {
          name: 'message',
          type: 1,
          chatId: this.chatId,
          message: this.inputVal,
          senderId: this.userId,
          receiverId:
            this.userId == this.currentContact.user1Id
              ? this.currentContact.user2Id
              : this.currentContact.user1Id,
          timestamp: dayjs().format('YYYY-MM-DD HH:mm:ss'),
          isRead: false,
        }
        this.$websocket.sendWebsocket(message)
        this.$store.dispatch('sender', { chatId: this.chatId, message })
        this.inputVal = ''
      }
    },
    insertEmoji(emoji) {
      this.inputVal += emoji.data
    },
    loadMessage(id) {
      this.chatId = id
    
      this.currentContact = this.chats.find((item) => item.chatId == id)
      this.tutorId = this.currentContact.user1Id
      this.setBottom()
    },
  },
}
</script>
  <style scoped lang="scss">
/* 针对滚动条整体样式 */
::-webkit-scrollbar {
  width: 4px; /* 滚动条宽度 */
  height: 4px; /* 横向滚动条高度 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: transparent; /* 背景透明 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2); /* 半透明黑色 */
  border-radius: 2px; /* 圆角 */
}

/* 滚动条滑块在悬停时 */
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4); /* 增加透明度以便用户悬停时可见 */
}

.app-container {
  background: linear-gradient(
    180deg,
    rgba(0, 190, 189, 0.1),
    rgba(136, 255, 254, 0.2) 50%,
    rgba(242, 244, 247, 0.1)
  );
}
.app {
  background-color: white;
  border-radius: 12px 12px 0 0;
}
.msgListMain {
  height: 700px;
  overflow-y: auto;
  margin-top: 15px;
}
.msgUserList {
  border-radius: 10px;
}
.msgListMain_empty {
  display: flex;
  height: 600px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.hover_down_menu {
  display: none;
}
.msgUserList:hover {
  background-color: #f2f2f2;
  cursor: pointer;
}
.msgUserList:hover .hover_down_menu {
  display: block;
}
.el-dropdown-link {
  cursor: pointer;
}
.el-icon-arrow-down {
  font-size: 15px;
  font-weight: 500;
}
.main {
  background-color: white;
  height: 800px;
  margin-left: 5px;
}
.main_empty {
  display: flex;
  background-color: white;
  height: 700px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.main_empty .el-row {
  text-align: center;
}
.main_empty img {
  width: 25%;
}
.msg_content {
  margin-top: 30px;
  height: 550px;
  overflow: auto;
  //background-color: gray;
}
.chat_bubble {
  float: right;
  margin-right: 35px;
  color: #333;
  background-color: rgba(0, 190, 189, 0.2);
  height: 40px;
  line-height: 40px;
  padding: 0 12px 0 12px;
  border-radius: 5px;
}
.input_top_menu_img {
  width: 22px;
  height: 22px;
  cursor: pointer;
}
.chat {
  position: relative;
}
.chat .image {
  position: absolute;
  left: 0;
  bottom: 120px;
  width: 400px;
  height: 400px;
  border-radius: 50%; /* 圆形效果 */
  opacity: 0.2; /* 半透明 */
  overflow: hidden; /* 防止内容溢出 */
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;

  /* 添加阴影效果 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.2);

  /* 动画效果 */
  animation: pulse 8s infinite ease-in-out;
  transform: scale(1); /* 初始缩放 */
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* 鼠标悬停效果 */
.image:hover {
  transform: scale(1.05); /* 放大 */
  opacity: 1; /* 提高不透明度 */
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}
</style>